<template>
  <div>
    <div class="page-header">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="page-header__title">{{$t('pages.databag.page_title')}}</div>
        </el-col>
        <el-col :span="13" class="text-right">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input :placeholder="$t('pages.databag.search_placeholder')" v-model="formInline.keyword">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getDataList()"></i>
              </el-input>
            </el-form-item>
            <el-button type="danger"  @click="search">{{$t('common.search')}}</el-button>
          </el-form>
        </el-col>

        <el-col :span="3" class="text-right">
          <el-button type="primary" icon="el-icon-plus" @click="showUploadForm({})">{{$t('common.uploaad')}}</el-button>
        </el-col>
      </el-row>
    </div>

    <el-card class="table-container">
      <el-table :data="dataList">
        <!--序号-->
        <el-table-column
          label-class-name="text-center"
          class-name="text-center"
          prop="id"
          :label="$t('common.col_index')"></el-table-column>
        <!--文件名称-->
        <el-table-column prop="fileName" :label="$t('pages.databag.col_fileName')"></el-table-column>
        <!--上传人-->
        <el-table-column prop="uploader" :label="$t('pages.databag.col_uploader')"></el-table-column>
        <!--上传时间-->
        <el-table-column
          prop="uploadTm"
          label-class-name="text-center"
          class-name="text-center"
          :label="$t('pages.databag.col_uploadTm')"></el-table-column>
        <!--操作-->
        <el-table-column
          label-class-name="text-center"
          class-name="text-center action"
          prop="operate"
          :label="$t('common.operation')"
          width="180">
          <template slot-scope="scope">
            <a @click.prevent="showUploadForm({desc: '', fileList:[{id: scope.row.id, url: scope.row.url, name: scope.row.fileName}]})" class="text-warning" href="/">编辑</a>
            <a @click.prevent="rmDataBag(scope.row)" class="text-danger" href="/">删除</a>
            <a @click.prevent="allot(scope.row)" class="text-info" href="/">下载</a>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
        @current-change="onCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalPage">
      </el-pagination>
    </el-card>

    <!--数据包上传/修改-->
    <el-dialog
      title="数据包上传"
      width="35%"
      :visible.sync="dataBagDialog">
      <div>
        <el-form ref="form" :model="dataBag" :rules="rule" label-width="80px">
          <el-form-item label="数据包" prop="fileList">
            <el-upload
              class="upload-demo"
              v-model="dataBag.fileList"
              ref="upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="uplodOnSuccess"
              :file-list="dataBag.fileList">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input type="textarea" v-model="dataBag.desc" placeholder="请输入数据包描述"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="ok">确 定</el-button>
            <el-button type="danger" @click="dataBagDialog = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from '@/utils/axios'
  const data = {
    list: [
      {id: 0, fileName: 'a.pdf', uploader: '张三', uploadTm: '2018-03-05 12:35', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
      {id: 1, fileName: 'a.pdf', uploader: '张三', uploadTm: '2018-03-05 12:35'},
      {id: 2, fileName: 'a.pdf', uploader: '张三', uploadTm: '2018-03-05 12:35'},
      {id: 3, fileName: 'a.pdf', uploader: '张三', uploadTm: '2018-03-05 12:35'},
      {id: 4, fileName: 'a.pdf', uploader: '张三', uploadTm: '2018-03-05 12:35'},
      {id: 5, fileName: 'a.pdf', uploader: '张三', uploadTm: '2018-03-05 12:35'},
      {id: 6, fileName: 'a.pdf', uploader: '张三', uploadTm: '2018-03-05 12:35'},
    ],
    pageSize: 10,
    totalPage: 10,
    currentPage: 2
  }

  export default {
    data () {
      return {
        // 数据上传/编辑
        dataBagDialog: false,
        dataBag: {
          fileList: [],
          desc: ''
        },
        rule: {
          fileList: [
            {type: 'array', required: true, message: '请选择数据包', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请输入数据包描述', trigger: 'blur' }
          ]
        },
        formInline: {
          keyword: ''
        },
        dataList: data.list || [],
        currentPage: data.currentPage || 1,
        pageSize: data.pageSize || 0,
        totalPage: data.totalPage || 0
      }
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 删除回调
      handleRemove(){},

      handlePreview(){},
      // 显示上传/编辑数据包弹窗
      showUploadForm (dataBag = {}) {
        this.dataBagDialog = true
        this.dataBag = dataBag
      },
      // 删除
      rmDataBag (dataBag) {
        this.$confirm('是否删除当前数据包', '', {
          confirmButtonClass: 'el-button--danger',
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(() => {
          alert('shanchu ')
        })
      },

      /**
       * 获取数据
       */
      getDataList (arg = {}) {
        let params = Object.assign({
          ...this.formInline,
          currentPage: this.currentPage
        }, arg)
        console.log(params)
        // @TODO axios.get()
      },

      /**
       * 搜索数据
       */
      search () {
        this.currentPage = 1
        this.getDataList()
      },
      /**
       * 当前页码改变
       */
      onCurrentChange (page) {
        this.currentPage = page
        this.getDataList()
      },
      /* 数据包上传成功后在校验 */
      uplodOnSuccess() {
        this.$refs.form.clearValidate('fileList')
      },
      /* 上传确定按钮 */
      ok() {
        this.$refs['form'].validate((valid) => {
          if(valid) {

          } else {
            /* setTimeout(()=>{
              this.$refs.form.validateField('fileList')
              console.log(11)
            },2000) */
            this.$message({
              type: 'error',
              message: '校验失败，请重新检查'
            })
            // this.dataBagDialog = false
          }
        })
      },
    }
  }
</script>
